import * as React from "react";
import {Card, GridList, Image, Spacings, Text} from "react-native-ui-lib";
import {Dimensions, TouchableOpacity} from "react-native";



// 定义 MenuItem 类型
interface MenuItem {
    name: string;
    imageUrl: string;
}

// 定义 GridMenu 组件的 props 类型
interface GridMenuProps {
    menuItems?: MenuItem[];
}

export function GridMenu({ menuItems = [] }: GridMenuProps) {
    const screenWidth = Dimensions.get('window').width;  // 获取屏幕宽度
    const itemWidth = screenWidth / 4;  // 将屏幕宽度除以4以获得每个项的宽度
    function _onPress(item: MenuItem) {
        // 处理点击事件
    }

    const _renderItem = ({ item }: { item: MenuItem }) => (
        <Card
            onPress={() => _onPress(item)}
            enableShadow={false}
            style={{  alignItems: 'center', width: itemWidth }}
        >
            <Image
                source={{ uri: item.imageUrl }}
                style={{ width: 35, height: 35 }}
            />
            <Text
                style={{
                    textAlign: 'center',
                    marginTop: 4,
                    width: itemWidth
                }}
                numberOfLines={1}
                ellipsizeMode="tail" // 使用省略号的模式，"tail"表示在末尾显示省略号
            >
                {item.name}
            </Text>

        </Card>
    );

    return (
        <GridList
            style={{ marginTop: Spacings.s5 }}
            data={menuItems}
            numColumns={4}
            renderItem={_renderItem}
        />
    );
}
